<template>
  <div>
    <!-- index 分别为：1=资料、2=的关注、3=我的收藏、4=我的博客 -->
    <menuRight menuList="个人资料,我的关注,我的收藏,我的博客" @choseIndex="getIndex"></menuRight>
    <br>
    <br>
    <br>
    <br>
    <myData v-if="myData"></myData>
    <myCare v-if="myCare"></myCare>
    <myCollect v-if="myCollect"></myCollect>
    <myBlog v-if="myBlog"></myBlog>
  </div>
</template>

<script type="text/javascript">
import bus from "@/components/utils/bus.js";
import menuRight from "../base/menuRight";

import myData from "./myData";
import myCare from "./myCare";
import myCollect from "./myCollect";
import myBlog from "./myBlog";

export default {
  name: "personalCenterHome",
  data: function() {
    return {
      myData: true,
      myCare: false,
      myCollect: false,
      myBlog: false
    };
  },
  components: {
    myData,
    myCare,
    myCollect,
    myBlog,
    menuRight // 可以这样引入多个vue
  },
  methods: {
    // 供父组件调用、初始化页面
    setPage(param) {
      this.initPage();
    },
    initPage() {
      // 设置默认展示页面
      this.myData = true; // 显示
      this.myCare = false; // 隐藏
      this.myCollect = false;
      this.myBlog = false;
    },
    // 从子组件传参过来并调用
    getIndex: function(index) {
      console.log(`传过来的index是` + index);
      // 切换3级内容
      if (index == 0) {
        // 个人资料
        this.initPage();
      } else if (index == 1) {
        // 我的关注
        this.myCare = true;
        this.myCollect = false;
        this.myBlog = false;
        this.myData = false;
      } else if (index == 2) {
        // 我的收藏
        this.myCollect = true;
        this.myCare = false;
        this.myBlog = false;
        this.myData = false;
      } else {
        // 我的博客
        this.myBlog = true;
        this.myCare = false;
        this.myCollect = false;
        this.myData = false;
      }
    }
  },
  created() {
    this.initPage();
  },
  mounted() {}
};
</script>

